<template>
	<div class="AsideBar">
		<main>
			<div class="aside-title">
				<!-- <img src="../../../assets/image/law.jpg" alt="" /> -->
				<h1>LawZhuo.</h1>
			</div>

			<div class="aside-nav" v-if="menuOptions">
				<div class="container" v-for="item in menuOptions" :key="item.id">
					<section @click="choiceAsideItem(item)" :class="{ 'current': choiceMenuArray[0] == item.id }">
						<n-icon size="16" class="icon">
							<component :is="item.meta.icon"></component>
						</n-icon>
						<span>{{ item.meta.title }}</span>
					</section>

					<template v-if="item.children && curOpenIndex == item.id">
						<section class="sec-children" v-for="item2 in item.children" :key="item2.id" @click="choiceAsideItem(item2)" :class="{ 'current': choiceMenuArray[1] == item2.id }">
							<n-icon size="16" class="icon">
								<component :is="item2.meta.icon"></component>
							</n-icon>
							<span>{{ item2.meta.title }}</span>
						</section>
					</template>
					
				</div>
			</div>
		</main>
	</div>
</template>

<script lang="ts">
import { defineComponent, h, ref, Component } from "vue";
import { useRouter } from 'vue-router'
import type { RouteFormatItem } from '../../../utils/map-menus.type'
import {
	BarChartOutline,
	BarChart,
	Home,
	People,
	PieChart,
	Settings,
	Person,
	Menu,
} from "@vicons/ionicons5";
import localCache from "../../../utils/local-cache";
export default defineComponent({
	components: {
    	BarChart,
		Home,
		People,
		PieChart,
		Settings,
		Person,
		Menu,
  	},
	setup() {
		const router = useRouter();
		let menuOptions = localCache.getCache("limitMenus");
		let curOpenIndex = ref<number>(0);
		let choiceMenuArray = ref([0, 0]); 

		const choiceAsideItem = (item: RouteFormatItem) => {
			console.log(item)
			if (item.meta.type == 1 || !item.pid) {
				choiceMenuArray.value[0] = item.id;
				choiceMenuArray.value[1] = 0;
			} else {
				choiceMenuArray.value[1] = item.id;
			}
			if (!item.children) {
				// 不存在子级，跳转
				router.push(item.path);
			} else {
				// 存在子级
				curOpenIndex.value = item.id;
			}
			
		}

		return {
			menuOptions,
			BarChart,
			Home,
			People,
			PieChart,
			Settings,
			Person,
			Menu,
			choiceAsideItem,
			curOpenIndex,
			choiceMenuArray
		};
	},
});
</script>

<style scoped lang="scss">
.AsideBar {
	padding: 24px;
	height: 100vh;
	border-radius: 10px;
	// background-color: var(--color1);
	box-sizing: border-box;
	main {
		width: 180px;
		height: 100%;
		border-radius: 10px;
		background-color: var(--theme-color-white);
		.aside-title {
			display: flex;
			align-items: center;
			padding: 0 24px;
			height: 8%;
			transition: all 1.5s;
			box-sizing: border-box;
			box-shadow: 0 2px 5px rgba(1, 41, 112, 0.08);
			h1 {
				margin-left: 12px;
				font-size: 20px;
				background-image: -webkit-linear-gradient(right, #747bff, #4154f1);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			img {
				height: 100%;
				border-radius: 50%;
			}
		}
		.aside-nav {
			padding: 12px;
			width: 100%;
			height: 92%;
			.current {
				color: var(--theme-color-main);
			}
			.container {
				// background-color: pink;
				section {
					padding: 12px 15px;
					display: flex;
					transition: all 0.1s;
					span {
						font-size: var(--size-12);
					}
					.icon {
						margin-right: 12px;
					}
					&:hover {
						background-color: var(--theme-color-main);
						border-radius: 5px;
						color: var(--theme-color-white);
					}
				}
				.sec-children {
					margin-left: 15px;
				}
			}
		}
	}
}
</style>
